<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <meta name="format-detection" content="address=no" />
    <meta name="format-detection" content="date=no" />
    <title>弹窗</title>
    <link href="../../css/aui.css" rel="stylesheet" type="text/css">
    <link href="../../css/index.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="../../css/data-flex.min.css">
    <style>
        html,
        body {
            background-color: rgba(0, 0, 0, 0);
            height: 100%;
        }

        .alert_content {
            position: fixed;
            top: 50%;
            left: 2rem;
            right: 2rem;
            height: auto;
            transform: translateY(-50%);
            background: #fff;
            z-index: 2;
            font-size: 0.9rem;
            text-align: center;
            border-radius: 0.4rem;
        }

        .alert_content .content {
            position: relative;
            padding: 0.75rem;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(63, 64, 70, 1);
            line-height: 19px;
        }

        .alert_btn:after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            height: 1px;
            width: 100%;
            background: #E2E4E9;
            transform: scaleY(0.5);
            -webkit-transform: scaleY(0.5);
            transform-origin: 0 0;
            -webkit-transform-origin: 0 0;
        }

        .alert_content .alert_btn {
            position: relative;
            display: flex;
            height: 2.5rem;
            line-height: 2.5rem;
        }

        .alert_content .alert_btn p {
            flex: 1;
            font-size: 18px;
            position: relative;
        }

        .alert_content .alert_btn p:first-child:after {
            content: "";
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 1px;
            background: #eaeaea;
            transform: scaleX(0.5);
            -webkit-transform: scaleX(0.5);
            transform-origin: 0 0;
            -webkit-transform-origin: 0 0;
        }

        .alert-title {
            padding-top: 20px;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: rgba(63, 64, 70, 1);
        }

        .input-box {
            margin: 14px auto;
            height: 38px;
            width: 238px;
            border-radius: 6px;
            border: 1px solid #BFBFBF;
        }

        .input-box input {
            border-radius: 0;
            border: 0;
            line-height: 18px;
            font-size: 14px;
            padding: 0 10px;
        }
    </style>
</head>

<body>
    <div class="vueApp" v-cloak>
        <div style="background-color: rgba(0, 0, 0, 0.4);width:100%;height:100%;position:fixed;top:0;left:0;z-index:1;">
        </div>
        <div class="alert_content">
            <p class="alert-title">创建班级</p>
            <div class="input-box" data-flex="cross:center">
                <input type="text" v-model="classesName" maxlength="12" placeholder="请输入班级名称">
            </div>
            <div class="alert_btn">
                <p style="color:#7F818D;" tapmode onclick="fnBack()">取消</p>
                <p style="color:#5AC2FF;" tapmode onclick="fnConfirm()">确定</p>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-font.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-tabbar.js"></script>
<script type="text/javascript">
    var USER, $S;
    var vm, param = {};
    apiready = function () {
        USER = USER();
        $S = SERVICE();
        param = api.pageParam;
        fnInit();
    }

    function fnInit() {
        vm = new Vue({
            el: ".vueApp",
            data: {
                classesName: ''
            }
        });
    }
    //提交
    function fnConfirm() {
        if (vm.classesName !== '') {
            createClass();
        }
    }

    function fnBack() {
        api.closeFrame();
    }

    // 创建班级
    function createClass() {
        var url = 'clsClass/createClass';
        var params = {
            "classesName": vm.classesName
        };

        var callback = function (data) {
            fnToast('创建成功');
            api.execScript({
                name: param.winName,
                frameName: param.frmName,
                script: 'getPageData()'
            });
            setTimeout(function(){
                api.closeFrame();
            },100);
            // status 为200时,只返回data
        };
        var error = function (res) {
            // status 不是200时,全部返回
            api.refreshHeaderLoadDone();
        };
        POST(url, params, callback, error);
    }
</script>

</html>